<template>
  <div>
    <div class="zscf_aboutus_wper" style="position: relative">
      <div class="zscf_aboutus px1000 clearfix">
        <div class="zscf_aboutus_l fl">
          <ul class="zscf_aboutus_lul clearfix">
            <li class="pt10"><a href="javascript:;" @mouseover="showapp" @mouseleave="noshowapp"><img src="../assets/11112/images/app.png" alt=""></a>
            </li>
            <li>
              <p class="pb20">服务热线</p>
              <strong>400-027-0101</strong>
            </li>
            <li>
              <div v-show="showappflag" style="position: absolute;top: -60px;left: 430px">
                <img src="../assets/11112/images/A~GV905@RIAA)35C1ZZKHEV.png" style="width: 100px;height: 100px">
              </div>

              <div v-show="showsinapictureflag" style="position: absolute;top: -60px;left: 680px">
                <img src="../assets/11112/images/A~GV905@RIAA)35C1ZZKHEV.png" style="width: 100px;height: 100px">
              </div>

              <div v-show="showweixinpictureflag" style="position: absolute;top: -60px;left: 730px">
                <img src="../assets/11112/images/A~GV905@RIAA)35C1ZZKHEV.png" style="width: 100px;height: 100px">
              </div>

              <div v-show="showmobileflag" style="position: absolute;top: -110px;left: 740px">
                <img src="../assets/11112/images/mayun.jpg" style="width: 200px;height: 140px">
              </div>

              <p class="pb10 linkpic">
                <a href="javascript:;" @mouseover="showsinapicture" @mouseleave="noshowsinapicture"><img src="../assets/11112/images/ft_sina.png" alt=""></a>
                <a href="javascript:;" @mouseover="showweixinpicture" @mouseleave="noshowweixinpicture"><img src="../assets/11112/images/ft_weixin.png" alt=""></a>
                <a href="javascript:;" @mouseover="showmobile" @mouseleave="noshowmobile"><img src="../assets/11112/images/ft_erji.png" alt=""></a>
              </p>
              <p><a href="#">kefu@zhongxincaifu.com</a></p>
            </li>
          </ul>
        </div>
<!--        <div v-show="calflag" style="position: absolute;top: -148px;left: 1660px" @click="closecal">
          <el-button icon="el-icon-close" circle></el-button>
        </div>-->
        <!--<div id="calculator" style="position: absolute;top: -148px;left: 1450px" v-show="calflag">
          &lt;!&ndash;显示框&ndash;&gt;
          <input-box v-bind:input-show="inputShow">
          </input-box>
          <btn-list>
            <div @click="clearValue()" class=" btn-30 btn-radius color-red clear-marginleft">C</div>
            <div class=" btn-30 btn-radius color-blue">+/-</div>
            <div @click="inputValue('%')" class=" btn-30 btn-radius color-blue">%</div>
            <div @click="backValue()" class=" btn-70 btn-radius color-red font-14">←</div>
            <div @click="inputValue('7')" class=" btn-30 btn-radius clear-marginleft">7</div>
            <div @click="inputValue('8')" class=" btn-30 btn-radius">8</div>
            <div @click="inputValue('9')" class=" btn-30 btn-radius">9</div>
            <div @click="squareValue()" class=" btn-30 btn-radius color-blue font-14">×²</div>
            <div @click="radicalValue()" class=" btn-30 btn-radius color-blue font-12">√</div>
            <div @click="inputValue('4')" class=" btn-30 btn-radius clear-marginleft">4</div>
            <div @click="inputValue('5')" class=" btn-30 btn-radius">5</div>
            <div @click="inputValue('6')" class=" btn-30 btn-radius">6</div>
            <div @click="inputValue('×')" class=" btn-30 btn-radius color-blue font-14">×</div>
            <div @click="inputValue('÷')" class=" btn-30 btn-radius color-blue font-12">÷</div>
            <div @click="inputValue('1')" class=" btn-30 btn-radius clear-marginleft">1</div>
            <div @click="inputValue('2')" class=" btn-30 btn-radius">2</div>
            <div @click="inputValue('3')" class=" btn-30 btn-radius">3</div>
            <div @click="inputValue('+')" class=" btn-30 btn-radius color-blue font-14">+</div>
            <div @click="inputValue('-')" class=" btn-30 btn-radius color-blue font-14">-</div>
            <div @click="inputValue('0')" class=" btn-70 btn-radius clear-marginleft">0</div>
            <div @click="inputValue('.')" class=" btn-30 btn-radius">.</div>
            <div @click="calValue()" class=" btn-70 btn-radius color-red font-14">=</div>
          </btn-list>
        </div>-->
        <!-- end left -->
        <div class="zscf_aboutus_r fl clearfix">
          <a href="javascript:;" class="fl ft_ewm"><img src="../assets/11112/images/ft_erweima.png" alt=""></a>
          <ul class="fl clearfix">
            <!--<li><a href="#">联系我们</a></li>
            <li><a href="#">我要融资</a></li>
            <li><a href="javascript:;" @click="changemoduletonotilelist('noticelist')">帮助中心</a></li>
            <li><a href="#">友情链接</a></li>
            <li><a href="#">招贤纳士</a></li>-->
            <!--<li><a href="javascript:;" @click="showcal">收益计算器</a></li>-->
<!--            <li style="width: 60px;height: 20px;margin-top: -10px"><el-popover
              placement="bottom"
              title="标题"
              width="200"
              trigger="click"
              content="联系电话：13131313131">
              <el-button slot="reference" style="border: 0">联系我们</el-button>
            </el-popover></li>
            <li style="width: 60px;height: 20px;margin-top: -10px"><el-popover
              placement="bottom"
              title="标题"
              width="200"
              trigger="click"
              content="联系电话：13131313131">
              <el-button slot="reference" style="border: 0">我要融资</el-button>
            </el-popover></li>
            <li style="width: 60px;height: 20px;margin-top: -10px"><el-popover
              placement="bottom"
              title="标题"
              width="200"
              trigger="click"
              content="联系电话：13131313131">
              <el-button slot="reference" style="border: 0">招贤纳士</el-button>
            </el-popover></li>
            <li style="width: 60px;height: 20px"><el-popover
              placement="bottom"
              title="标题"
              width="200"
              trigger="click"
              content="联系电话：13131313131">
              <el-button slot="reference" style="border: 0">友情链接</el-button>
            </el-popover></li>
            <li style="width: 60px;height: 20px"><el-popover
              placement="bottom"
              title="标题"
              width="200"
              trigger="manual"
              content=""
              v-model="visible1">
              <el-button slot="reference" @click="changemoduletonotilelist('noticelist')" style="border: 0;">帮助中心</el-button>
            </el-popover></li>
            <li style="width: 60px;height: 20px"><el-popover
              placement="bottom"
              title="标题"
              width="200"
              trigger="manual"
              content=""
              v-model="visible">
              <el-button slot="reference" @click="showcal" style="border: 0;">收益计算器</el-button>
            </el-popover></li>-->
            <el-button  @click="drawer1=true"  style="margin-left: 0px;border: 0;margin-top: 18px">
              联系我们
            </el-button>
            <el-drawer
              title="我是标题"
              :visible.sync="drawer1"
              :with-header="false">
              <p style="font-size: 24px">联系我们</p><br>
              <p style="font-size: 20px">联系电话：13131313131</p>
            </el-drawer>
            <el-button  @click="drawer2=true"  style="margin-left: 16px;border: 0;margin-top: 18px">
              我要融资
            </el-button>
            <el-drawer
              title="我是标题"
              :visible.sync="drawer2"
              :with-header="false">
              <p style="font-size: 24px">我要融资</p>
              <p style="font-size: 20px">联系电话：13131313131</p>
            </el-drawer>
            <el-button  @click="drawer3=true"  style="margin-left: 16px;border: 0;margin-top: 18px">
              招贤纳士
            </el-button>
            <el-drawer
              title="我是标题"
              :visible.sync="drawer3"
              :with-header="false">
              <p style="font-size: 24px">招贤纳士</p>
              <p style="font-size: 20px">联系电话：13131313131</p>
            </el-drawer>
            <el-button  @click="drawer4=true"  style="margin-left: 0px;border: 0">
              友情链接
            </el-button>
            <el-drawer
              title="我是标题"
              :visible.sync="drawer4"
              :with-header="false">
              <p style="font-size: 24px">友情链接</p><br>
              <a href="http://www.baidu.com" style="font-size: 20px">百度一下,你就知道</a>
            </el-drawer>
            <el-button  @click="changemoduletonotilelist('noticelist')"  style="margin-left: 16px;border: 0">
              帮助中心
            </el-button>
            <el-button  @click="drawer5=true"  style="margin-left: 16px;border: 0">
              收益计算器
            </el-button>
            <el-drawer
              title="我是标题"
              :visible.sync="drawer5"
              :with-header="false">
              <p style="font-size: 24px">收益计算器</p>
              <div id="calculator" style="width: 220px;height: 265px">
                <!--显示框-->
                <input-box v-bind:input-show="inputShow">
                </input-box>
                <btn-list>
                  <div @click="clearValue()" class=" btn-30 btn-radius color-red clear-marginleft">C</div>
                  <div class=" btn-30 btn-radius color-blue">+/-</div>
                  <div @click="inputValue('%')" class=" btn-30 btn-radius color-blue">%</div>
                  <div @click="backValue()" class=" btn-70 btn-radius color-red font-14">←</div>
                  <div @click="inputValue('7')" class=" btn-30 btn-radius clear-marginleft">7</div>
                  <div @click="inputValue('8')" class=" btn-30 btn-radius">8</div>
                  <div @click="inputValue('9')" class=" btn-30 btn-radius">9</div>
                  <div @click="squareValue()" class=" btn-30 btn-radius color-blue font-14">×²</div>
                  <div @click="radicalValue()" class=" btn-30 btn-radius color-blue font-12">√</div>
                  <div @click="inputValue('4')" class=" btn-30 btn-radius clear-marginleft">4</div>
                  <div @click="inputValue('5')" class=" btn-30 btn-radius">5</div>
                  <div @click="inputValue('6')" class=" btn-30 btn-radius">6</div>
                  <div @click="inputValue('×')" class=" btn-30 btn-radius color-blue font-14">×</div>
                  <div @click="inputValue('÷')" class=" btn-30 btn-radius color-blue font-12">÷</div>
                  <div @click="inputValue('1')" class=" btn-30 btn-radius clear-marginleft">1</div>
                  <div @click="inputValue('2')" class=" btn-30 btn-radius">2</div>
                  <div @click="inputValue('3')" class=" btn-30 btn-radius">3</div>
                  <div @click="inputValue('+')" class=" btn-30 btn-radius color-blue font-14">+</div>
                  <div @click="inputValue('-')" class=" btn-30 btn-radius color-blue font-14">-</div>
                  <div @click="inputValue('0')" class=" btn-70 btn-radius clear-marginleft">0</div>
                  <div @click="inputValue('.')" class=" btn-30 btn-radius">.</div>
                  <div @click="calValue()" class=" btn-70 btn-radius color-red font-14">=</div>
                </btn-list>
              </div>
            </el-drawer>
          </ul>
        </div>
        <!-- end right -->
      </div>
    </div>

    <div class="zscf_bottom_wper">
      <div class="zscf_bottom px1000 clearfix">
        <p class="fl">© 2014 zhongxincaifu &nbsp; &nbsp;&nbsp; 中兴财富金融信息服务股份有限公司 &nbsp;&nbsp;&nbsp; 来源:<a
          href="http://www.mycodes.net/" target="_blank">源码之家</a></p>
        <p class="fr">
          <a href="#"><img src="../assets/11112/images/360.png" alt=""></a>
          <a href="#"><img src="../assets/11112/images/kexin.png" alt=""></a>
          <a href="#"><img src="../assets/11112/images/norton.png" alt=""></a>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
      name: "projectfooter",
      data(){
        return{
          showsinapictureflag:false,
          showweixinpictureflag:false,
          showmobileflag:false,
          mobile:"",
          inputShow:{
            value:'0'
          },
          calflag:false,
          showappflag:false,
          visible: false,visible1:false,
          drawer1: false,drawer2: false,drawer3: false,drawer4: false,drawer5: false,
        }
      },
      methods:{
        showapp:function(){
          this.showappflag=true
        },
        noshowapp:function(){
          this.showappflag=false
        },
        showsinapicture:function () {
          this.showsinapictureflag=true
        },
        noshowsinapicture:function () {
          this.showsinapictureflag=false
        },
        showweixinpicture:function () {
          this.showweixinpictureflag=true
        },
        noshowweixinpicture:function () {
          this.showweixinpictureflag=false
        },
        showmobile:function () {
          this.showmobileflag=true
        },
        noshowmobile:function () {
          this.showmobileflag=false
        },
        changemoduletonotilelist:function(t){
          this.$emit("func",t)
        },
        showcal:function(){
          this.calflag=!this.calflag
        },
        closecal:function(){
          this.calflag=false
        },
        /*计算器*/
        inputValue(param){
          if(Object.prototype.toString.call(this.inputShow.value) == "[object Number]"){   //判断输入框内容是否为数字类型
            this.inputShow.value = "0";   //数字类型说明是上个计算结果,清空内容
          }
          var str ='' + this.inputShow.value; //输入内容时,将输入框内容转为字符串类型
          var len = str.length;
          var arr = ["+","-","×","÷"];
          var num = (''+parseFloat(str.split('').reverse().join(''))).split('').reverse().join('');   //parseInt(str.split('').reverse().join('')))是获取输入框内最后一串数字,再反转回来 ,num为输入框内最后一串数字
          var nlen = num.length;
          if((num!= '0' && param != '.')|| (param == '.'&& num.indexOf(".")==-1)){   //输入框内最后一串数字不为0时拼接字符串
            if(arr.indexOf(str.charAt(len-1)) != -1 && arr.indexOf(param) != -1){    //若一开始输入内容为运算符,输入无效
              return;
            }
            this.inputShow.value += param;   //拼接输入内容
          }else{
            arr.push("%");
            if(param == '.'){      //若num中已有小数点,输入内容为小数点,视为无效
              return;
            }else if(!(arr.indexOf(param) != -1)){    //判断输入框内最后一个字符不为运算符
              this.inputShow.value =str.substring(0,str.length-nlen) + param;  //输入框内最后一串数字为0时,删除0拼接
            }
          }
        },
        clearValue(){      //清空输入框内容
          this.inputShow.value = '0';
        },
        calValue(){       //计算结果
          var str = this.inputShow.value;
          str = str.replace('×','*').replace('÷','/').replace('%','*0.01');    //替换运算符
          try{
            this.inputShow.value = eval(str);      //若用户输入内容不符合运算规则,不计算
          }catch(error){
            return;
          }
        },
        squareValue(){             //平方计算
          var str = this.inputShow.value;
          this.inputShow.value = Math.pow(eval(str),2)
        },
        radicalValue(){             //开根号计算
          var str = this.inputShow.value;
          this.inputShow.value = Math.sqrt(eval(str));
        },
        backValue(){              //删除键,删除单个字符
          var str = this.inputShow.value;
          if(str.length == 1){
            this.inputShow.value = "0";
          }else{
            this.inputShow.value = str.slice(0,str.length-1);
          }
        },
      },
      /*计算器*/
      components:{
        'input-box':{
          props:['inputShow'],
          computed: {
            value:function () {
              return this.inputShow.value
            }
          },
          template:'<input id="input-box" type="text" size="21" maxlength="21" v-model="value" readonly="readonly">'
        },
        'btn-list':{
          template:'<div id="btn-list"><slot></slot></div>'
        }
      }
    }
</script>

<style scoped>
  /* calculator */
  #calculator{width:200px;height:245px;padding:10px;border:1px solid #e5e5e5;background:#f8f8f8;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;box-shadow:0px 0px 10px #f2f2f2;-moz-box-shadow:0px 0px 10px #f2f2f2;-webkit-box-shadow:0px 0px 10px #f2f2f2;margin:40px auto 0 auto;}
  #calculator #input-box{margin:0;width:187px;padding:9px 5px;height:14px;border:1px solid #e5e5e5;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;background:#FFF;text-align:right;line-height:14px;font-size:12px;font-family:Verdana, Geneva, sans-serif;color:#666;outline:none; text-transform:uppercase;}
  #calculator #btn-list{width:200px;overflow:hidden;}
  #calculator #btn-list .btn-radius{border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;border:1px solid #e5e5e5;background:-webkit-gradient(linear, 0 0, 0 100%, from(#f7f7f7), to(#ebebeb));background:-moz-linear-gradient(top, #f7f7f7,#ebebeb);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f7f7f7,endColorstr=#ebebeb,grandientType=1);line-height:29px;text-align:center;text-shadow:0px 1px 1px #FFF;font-weight:bold;font-family:Verdana, Geneva, sans-serif;color:#666;float:left;margin-left:11px;margin-top:11px;font-size:12px;cursor:pointer;}
  #calculator #btn-list .btn-radius:active{background:#ffffff;}
  #calculator #btn-list .clear-marginleft{margin-left:0;}
  #calculator #btn-list .font-14{font-size:14px;}
  #calculator #btn-list .color-red{color:#ff5050}
  #calculator #btn-list .color-blue{color:#00b4ff}
  #calculator #btn-list .btn-30{width:29px;height:29px;}
  #calculator #btn-list .btn-70{width:70px;height:29px;}
</style>
